<template>
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <div
      style="background-color: #f5f6f7; min-height: 100vh;position: relative;"
    >
      <div class="top_bg"></div>
      <div
        class="fuel_remit_wraper"
        :class="[showKeyboard || showRemitPage ? 'active' : '']"
      >
        <div class="fuel_remit_nav" @click="goFuelPage()">
          <!-- <div class="icon_fixed"></div> -->
          <div class="name">{{ stationName }}</div>
          <div class="icon_right"></div>
        </div>
        <div class="remit_container">
          <div class="oilGun_container">
            <div
              class="fuel_remit_top"
              :class="[showRemitPage ? 'active' : '']"
            >
              <!-- 金额 -->
              <div class="amount_of_money">
                <div class="amount_of_money_title">金额</div>
                <van-field
                  :readonly="appType == 3 ? true : false"
                  v-model="priceValue"
                  @click="onFocusField()"
                  @focus="onFocusField()"
                  ref="fieldRef"
                  label="¥"
                  class="field_price"
                  :class="[!priceValue ? 'placeStyle' : '']"
                  placeholder="加油金额(0.01-50000)"
                >
                  <template #button>
                    <div
                      v-show="showKeyboard && !!priceValue"
                      class="icon_close"
                      @click="deletePrice()"
                    ></div>
                    <div
                      class="discountAmt"
                      v-show="CouponData.discountAmt > 0 && showRemitPage"
                    >
                      立减￥{{ verticalPrice }}
                    </div>
                  </template>
                </van-field>
              </div>
              <!-- 推荐价格 -->
              <div
                class="divider_line input"
                :class="[showKeyboard ? 'active' : '']"
                v-if="appType != 3"
              >
                <div class="price_list" v-show="showKeyboard && !priceValue">
                  <div
                    class="price_value"
                    @click="priceChange(item)"
                    v-for="(item, index) in priceList"
                    :key="index"
                  >
                    {{ item }}
                  </div>
                </div>
              </div>
              <!-- 油枪信息 -->
              <div class="oilGun_info" @click="goOilGunSelect()">
                <div
                  class="oilGun_info_top"
                  v-if="isShow"
                  @click.stop="showOilGunOrUser('user')"
                  style="border-bottom: 1px solid #e5e5e5;margin-bottom: 14px;padding-bottom: 14px;"
                >
                  <div class="oilGun_title">加油员</div>
                  <div
                    class="oilGun_placeholder"
                    style="padding-right: .4rem;color: #333;"
                  >
                    {{ userText }}
                  </div>
                </div>
                <div
                  class="oilGun_info_top"
                  @click.stop="showOilGunOrUser('oilGun')"
                >
                  <div class="oilGun_title">油枪</div>
                  <div
                    class="oilGun_placeholder"
                    v-if="!oilGunNum"
                    style="padding-right: .4rem;color: #333;"
                  >
                    {{ oilGunText }}
                  </div>
                  <div class="oilGun_value" v-else>
                    <span class="num">{{ oilGunNum }}</span>
                    <span class="line">&frasl;</span>
                    <span class="name">{{ oilGunName }}</span>
                  </div>
                  <!-- <template v-if="appType != 3">
                  <div v-show="oilGunStatus && oilGunNum" class="oli_icon_close" @click="changeOilGunValue()"></div>
                </template> -->
                </div>
                <div class="price" v-show="showRemitPage && !!oilOfficialPrice">
                  单价：<span class="price_color"
                    >￥{{ oilOfficialPrice }}/L</span
                  >
                </div>
              </div>
              <div
                class="divider_line"
                :class="[oilGunStatus ? 'active' : '']"
              ></div>
              <!-- 选择油枪号 -->
              <!-- <div class="oilGun_main_wraper" v-show="oilGunStatus && appType != 3">
              <div class="oilGun_main_content">
                <div class="main_card" :class="[oilGunNum === item.gunName ? 'active' : '']" v-for="item in staOilGunList"
                  :key="item.oilId" @click="changeCard(item)">
                  <div class="gunName">{{ item.gunName }}</div>
                  <span class="line">&frasl;</span>
                  <div class="oilName">
                    {{ item.oil.oilName + item.oil.oilClass }}
                  </div>
                  <div class="active_icon" v-show="showRemitPage">
                    <img src="../../../static/fuel/pay-active-icon.png" />
                  </div>
                </div>
              </div>
            </div> -->
            </div>

            <!-- 支付方式 -->
            <!-- 支付方式 -->
            <div
              class="remit_page_container"
              v-show="showRemitPage && !showCouponList"
            >
              <div class="remit_page_wraper">
                <div class="stored_radio">
                  <div class="stored_card">
                    <div class="icon stored"></div>
                    <div>
                      <div class="stored_title">储值卡</div>
                      <div class="stored_amt">
                        卡余额：{{ CouponData.balance || 0 }}
                      </div>
                    </div>
                  </div>
                  <!-- <input
                  type="radio"
                  name="radios"
                  value="1"
                  @click="changeStoredVale('1')"
                  v-model="radioParams"
                /> -->
                  <van-radio-group v-model="radioParams">
                    <van-radio
                      name="1"
                      value="1"
                      @click="changeStoredVale('1')"
                      v-model="radioParams"
                      checked-color="#FD6B00"
                    ></van-radio>
                  </van-radio-group>
                </div>

                <div
                  class="divider_line"
                  :class="[oilGunStatus ? 'active' : '']"
                ></div>
                <div class="stored_radio">
                  <div class="stored_card">
                    <div class="icon vx"></div>
                    <div class="stored_title">微信</div>
                  </div>
                  <!-- <input
                  type="radio"
                  name="radios"
                  value="2"
                  @click="changeStoredVale('2')"
                  v-model="radioParams"
                /> -->
                  <van-radio-group v-model="radioParams">
                    <van-radio
                      name="2"
                      value="2"
                      @click="changeStoredVale('2')"
                      v-model="radioParams"
                      checked-color="#FD6B00"
                    ></van-radio>
                  </van-radio-group>
                </div>
              </div>
            </div>

            <!-- 优惠劵列表 -->
            <div class="coupon_info" v-show="showRemitPage">
              <img src="../../../static/fuel/pay-yhq.png" />
              <van-coupon-cell
                :coupons="coupons"
                :chosen-coupon="chosenCoupon"
                @click="
                  clickCoupons((CouponData.couponList || []).length === 0)
                "
              />
            </div>
          </div>
        </div>
        <!-- 数字键盘 -->
        <van-number-keyboard
          :class="[Number(priceValue) >= 0.01 ? '' : 'disabold']"
          v-model="priceValue"
          :maxlength="9"
          :show="showKeyboard"
          theme="custom"
          close-button-text="确认"
          extra-key="."
          @input="$refs.fieldRef.blur()"
          @close="onCloseKeyboard()"
        />
        <!-- 购物车 -->
        <van-popup
          v-model:show="showBottom"
          position="bottom"
          closeable
          :style="{ height: '80%' }"
        >
          <div class="popup_container">
            <div class="title">购物车</div>
            <div class="popup_main">
              <div class="popup_name">油品</div>
              <div class="popup_price">
                <div class="tag">{{ oilGunNum }}号油枪{{ oilGunName }}</div>
                <div class="price">￥{{ newPrice }}</div>
              </div>
              <!-- 优惠劵 -->
              <div v-show="false" class="popup_preferential"></div>
            </div>
          </div>
        </van-popup>
        <!-- 优惠劵弹窗 -->
        <van-popup
          v-model:show="showCouponList"
          closeable
          round
          position="bottom"
          style="height: 90%; padding-top: 4px"
        >
          <div class="coupons_popup_container">
            <div class="title">优惠劵</div>
            <div class="van_popup_main">
              <div
                class="popup_list"
                @click="changeRadioCoupon(index)"
                v-for="(item, index) in coupons"
                :key="item.id"
              >
                <div
                  class="left_popup"
                  :class="[item.couponType === '1' ? '' : 'red']"
                >
                  <div class="valueDesc">{{ item.valueDesc }}</div>
                  <div class="condition">{{ item.condition }}</div>
                </div>
                <div class="right_popup">
                  <div
                    class="name"
                    :class="[item.couponType === '1' ? '' : 'red']"
                  >
                    {{ item.name }}
                  </div>
                  <div class="time">截止：{{ item.time }}</div>
                </div>
                <div class="radio">
                  <input
                    type="radio"
                    name="couponsRadio"
                    :value="index"
                    v-model="radioCouponsValue"
                  />
                </div>
              </div>
            </div>
          </div>
        </van-popup>
      </div>
      <!-- 底部支付 -->
      <div class="bottom_fix_bar" v-show="showRemitPage && !showCouponList">
        <div class="fix_bar_main">
          <div class="car_container">
            <!-- <div class="icon_car" @click="showBottom = !showBottom">
          <van-icon name="cart-o" size=".6rem" badge="1" />
        </div> -->
            <div class="newPrice">
              <div class="price_bar">
                总计：
                <!-- <span class="price_value">￥{{ newPrice }}</span> -->
                <span class="price_value">￥{{ this.CouponData.amt }}元</span>
                <span
                  v-show="CouponData.discountAmt > 0 && showRemitPage"
                  style="
                  color: #ccc;
                  font-size: 0.2rem;
                  text-decoration: line-through;
                "
                  >¥{{ this.CouponData.finalAmount }}</span
                >
              </div>
              <!-- <div class="price_coupon" v-show="!!couponPrice || CouponData.discountAmt > 0">优惠
            <span class="coupon_value">
              ￥{{ NewCouponPrice }}
            </span>
          </div> -->
              <div class="price_coupon">
                服务费
                <span> ￥{{ this.CouponData.channelFeePayer }} 元</span>
              </div>
            </div>
          </div>
          <van-button
            @click="submitRemit()"
            :disabled="radioParams === '1' && newPrice > CouponData.balance"
            type="warning"
            round
            >立即支付</van-button
          >
        </div>
      </div>

      <!-- 选择员工油枪弹窗 -->
      <van-popup
        v-model="oilGunOrUserShow"
        round
        position="bottom"
        :close-on-click-overlay="false"
        :style="{ height: '40%' }"
      >
        <div
          style="height: 100%;display: flex;justify-content: center;align-items: center;"
        >
          <div style="height: 100%;" v-show="swipeIndex === 0">
            <div class="oil-title">
              <span>选择员工</span>
            </div>
            <div class="oil-box">
              <template v-if="userList.length > 0">
                <div
                  class="oil-items"
                  v-for="item in userList"
                  :key="item.userId"
                  @click="changeUserId(item)"
                >
                  <span>{{ item.nickName }}</span>
                </div>
              </template>
              <div
                v-else
                style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);font-size: 24px;color: #ccc;"
              >
                该油站下暂无员工
              </div>
            </div>
          </div>
          <div
            style="height: 100%;position: relative;"
            v-show="swipeIndex === 1"
          >
            <van-icon
              v-show="!isHasUserId && isNeedStaff"
              @click="clickBack"
              name="revoke"
              size="20"
              style="position: absolute;top: 25px;left: 10px;"
            />
            <div class="oil-title">
              <span>选择油枪</span>
            </div>
            <div class="oil-box">
              <template v-if="oilGunList.length > 0">
                <div
                  class="oil-items"
                  v-for="item in oilGunList"
                  :key="item.id"
                  @click="changeOilGunId(item)"
                >
                  <div class="gunName">{{ item.gunName }}</div>
                  <span class="line">&frasl;</span>
                  <div class="oilName">
                    {{ item.oil.oilName + item.oil.oilClass }}
                  </div>
                </div>
              </template>
              <div
                v-else
                style="position: absolute;top: 50%;left: 30%;transform: translate(-20%,-50%);font-size: 24px;color: #ccc;"
              >
                该员工未绑定油枪
              </div>
            </div>
          </div>
        </div>
      </van-popup>
    </div>
  </van-pull-refresh>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
import { getAuthen } from "@/utils/getAuthen";
import wx from "weixin-js-sdk";
import Qr from "@/components/QrCode";
import Vue from "vue";

import {
  NumberKeyboard,
  Field,
  Icon,
  Popup,
  Toast,
  Button,
  CouponCell,
  Radio,
  RadioGroup,
  Swipe,
  SwipeItem,
  PullRefresh
} from "vant";
Vue.use(NumberKeyboard);
Vue.use(Field);
Vue.use(Icon);
Vue.use(Popup);
Vue.use(Toast);
Vue.use(Button);
Vue.use(CouponCell);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(PullRefresh);

export default {
  head() {
    return {
      title: "一键加油"
    };
  },
  data() {
    return {
      radioParams: "2",
      radioCouponsValue: "-1",
      showKeyboard: false, // 键盘显示
      showBottom: false, // 购物车
      showRemitPage: false, // 支付界面
      showCouponList: false, // 优惠劵
      staOilGunList: [],
      oilGunNum: "", // 油枪号
      oilGunName: "", // 油枪名字结合
      oilName: "", // 油枪名字
      oilClass: "", // 油枪类型
      oilId: "", // 油ID
      oilGunStatus: true, // 油枪状态
      priceValue: "", // 价格
      oilOfficialPrice: "", // 单价
      priceList: [100, 200, 300, 400],
      CouponData: {}, // 优惠劵信息
      chosenCoupon: -1, // 优惠劵索引
      couponPrice: "", // 优惠金额
      verticalPrice: "", // 立减
      couponNo: "", // 优惠劵编号
      couponUserId: "", // 优惠卷id
      axiosNum: 0,
      oilGunText: "请选择油枪号",
      userText: "请选择加油员",
      oilGunOrUserShow: false,
      userList: [],
      oilGunList: [],
      swipeIndex: 0,
      isHasUserId: false,
      isNeedStaff: true,
      utmSource: 9,
      isLoading: false
    };
  },
  components: {
    Qr: Qr
  },
  computed: {
    // 优惠券列表数组
    coupons() {
      console.log("优惠券数据---coupons", this.CouponData);
      const { couponList = [] } = this.CouponData;
      return couponList.map(item => {
        // couponType：1 现金券  2 折扣券
        // couponAmt 优惠金额
        // newAmtByCoupon: 优惠后的金额
        // issueName:发放方式名称
        // 如果 couponType 为2（折扣卷）时 ，couponAmt 为折扣百分比
        // couponThresholdAmt  最低消费金额
        const couponAmt =
          item.couponType === "1"
            ? `${item.couponAmt} ￥`
            : `${item.couponAmt} %`;
        // const value =
        //   item.couponType === "1"
        //     ? `${item.couponAmt * 100}`
        //     : `${(Number(this.priceValue) / item.couponAmt) * 100}`;
        const value = Number(this.CouponData.discountCouponAmt) * 100;
        return {
          ...item,
          id: item.couponId,
          condition: `满${item.couponThresholdAmt}元可用`,
          name: item.couponType === "1" ? "立减劵" : "折扣劵", // 优惠券名称
          time: item.couponEffectiveTime,
          valueDesc: couponAmt, // 折扣券优惠金额文案
          couponUserId: item.couponUserId,
          value: Number(value) //  折扣券优惠金额，单位分
        };
      });
    },
    newPrice() {
      if (!!this.couponPrice) {
        return (
          Number(this.priceValue) -
          this.couponPrice -
          this.verticalPrice
        ).toFixed(2);
      }
      return Number(this.priceValue - this.verticalPrice).toFixed(2);
    },
    // 优惠总价格
    NewCouponPrice() {
      if (!!this.couponPrice) {
        return (Number(this.couponPrice) + this.verticalPrice).toFixed(2);
      }
      return (this.verticalPrice || 0).toFixed(2);
    },
    isShow() {
      if (this.isHasUserId) {
        return true;
      } else {
        return this.isNeedStaff;
      }
    },
    ...mapGetters({
      userInfo: "authen/userInfo"
    })
  },
  created() {
    // console.log(this.phone);
    // if (!this.phone) {
    //   getAuthen("", "remit");
    //   return false;
    // }
    console.log("进入remit页面-userInfo：", this.userInfo);
    console.log("store中的存储的用户信息", this.$store.state.authen.userInfo);
    if (!this.userInfo.enterpriseName) {
      console.log("000--扫码进入--授权");
      getAuthen("", "remit");
      return false;
    }
    let currentUrl = window.location.href;
    let urlObj = this.getUrlParams(currentUrl);
    if (urlObj.utmSource) this.utmSource = urlObj.utmSource;
    this.stationId = urlObj.stationId;
    this.userId = urlObj.userId;
    this.stationName = urlObj.stationName;
    this.appType = urlObj.appType; // 来源类型3:pos机
    if (this.appType == 3) {
      this.userText = urlObj.userName; // pos员工名
      this.oilGunName = urlObj.oilName; // 油枪名
      this.oilGunNum = urlObj.gunName; // pos油枪
      this.priceValue = urlObj.price / 100; // 初始金额
      this.showKeyboard = false;
      this.showRemitPage = true;
      this.showCouponList = false;
      this.radioParams = "2";
      this.orderRandomId = urlObj.orderRandomId;
      this.oilGunOrUserShow = false;
      this.isHasUserId = true;
      this.getPayPosInfo();
    } else {
      this.getOilGunUserList(this.userId);
    }
    // this.init();
  },
  methods: {
    onRefresh() {
      console.log("下拉刷新");
      // 1、（openid没有）用户未授权 2001
      // 2、（手机号码没有）用户未开电子卡2002
      // 3、（油企id 没有）油企信息没有配置 3001
      if (!this.openId)
        return Toast({
          message: "2001"
        });
      if (!this.phone)
        return Toast({
          message: "2002"
        });
      if (!this.enterpriseId)
        return Toast({
          message: "3001"
        });
      this.$axios
        .$get("/selectMemberInfo", {
          params: {
            enterpriseId: this.enterpriseId,
            mobilePhone: this.phone
          }
        })
        .then(res => {
          if (res.retCode !== 0) {
            throw new Error(res.message);
          }
          this.$store.commit("authen/setUserInfo", res.data);
          console.log("用户信息", res.data);
          this.isLoading = false;
        })
        .catch(err => {
          Toast(err + "失败");
          this.isLoading = false;
        });
    },
    // 截取url参数
    getUrlParams(url) {
      let urlStr = url.split("?")[1];
      const urlSearchParams = new URLSearchParams(urlStr);
      const result = Object.fromEntries(urlSearchParams.entries());
      return result;
    },
    showOilGunOrUser(key) {
      if (this.appType != 3) {
        if (key === "user") {
          console.log(key);
          if (this.isHasUserId) {
            this.oilGunStatus = false;
            this.showRemitPage = false;
            Toast("通过员工码扫码进入");
            return;
          }
          this.swipeIndex = 0;
          this.oilGunOrUserShow = true;
        } else if (key === "oilGun") {
          console.log(key);
          this.swipeIndex = 1;
          this.oilGunOrUserShow = true;
        }
      }
    },
    // 获取油枪用户列表
    getOilGunUserList(userId) {
      let data = {
        stationId: this.stationId
      };
      if (userId) data.userId = userId;
      this.$axios
        .$get("/staff/list", {
          params: data
        })
        .then(res => {
          console.log(res);
          if (res.retCode === 0 && res.data) {
            this.isHasUserId = res.data.hasUserId;
            this.isNeedStaff = res.data.needStaff;
            this.oilGunOrUserShow = true;
            // 扫码进来
            if (this.isHasUserId) {
              this.userText = res.data.staff.nickName;
              this.oilGunList = res.data.staff.gunList;
              this.userId = res.data.staff.userId;
              this.userList = [];
              this.swipeIndex = 1;
              // 主页进来
            } else {
              if (this.isNeedStaff) {
                this.swipeIndex = 0;
                this.userList = res.data.staffList;
                this.oilGunList = [];
              } else {
                this.oilGunList = res.data.gunList;
                this.swipeIndex = 1;
              }
            }
          } else {
            Toast("请求失败！！！");
          }
        });
    },
    changeUserId(item) {
      console.log(item);
      this.oilGunList = item.gunList;
      this.userId = item.userId;
      this.userText = item.nickName;
      // if (this.oilGunText === '请选择油枪号') {
      //   this.swipeIndex = 1
      // } else {
      //   this.oilGunStatus = false;
      //   this.$refs.fieldRef.focus();
      //   this.showRemitPage = false;
      //   this.oilGunOrUserShow = false
      // }
      this.swipeIndex = 1;
      this.oilGunNum = "";
      this.oilGunName = "";
      this.oilGunText = "请选择油枪号";
    },
    changeOilGunId(item) {
      console.log(item);
      this.oilGunText = item.oil.oilName + item.oil.oilClass;
      this.oilGunNum = item.gunName;
      this.oilGunName = item.oil.oilName + item.oil.oilClass;
      this.oilName = item.oil.oilName;
      this.oilClass = item.oil.oilClass;
      this.oilId = item.oilId;
      this.oilOfficialPrice = item.oilStationPrice;
      this.oilGunStatus = false;
      this.$refs.fieldRef.focus();
      this.showRemitPage = false;
      this.oilGunOrUserShow = false;
      console.log(this.showKeyboard);
    },
    clickBack() {
      this.swipeIndex = 0;
    },
    init() {
      // 获取油站信息列表
      this.$axios
        .$get("/selectStaOilGunList", {
          params: {
            stationId: this.stationId,
            userId: this.userId
          }
        })
        .then(res => {
          if (res.retCode != 0) {
            alert(res.message);
            throw new Error(res.message);
            return false;
          }
          this.staOilGunList = res.data.staOilGunList || [];
        });
      // .catch((err) => {
      //   // alert(err);
      //   if (this.axiosNum === 3) {
      //     alert('网络波动请重新扫码进入')
      //     return false
      //   }
      //   if (this.axiosNum < 3) {
      //     this.axiosNum++
      //     this.init()
      //   }
      // });
    },
    // 改变油站卡片
    changeCard(item) {
      this.oilGunNum = item.gunName;
      this.oilGunName = item.oil.oilName + item.oil.oilClass;
      this.oilName = item.oil.oilName;
      this.oilClass = item.oil.oilClass;
      this.oilId = item.oilId;
      this.oilOfficialPrice = item.oilStationPrice;
      this.oilGunStatus = false;
      this.$refs.fieldRef.focus();
      this.showRemitPage = false;
    },

    // 删除金额
    deletePrice() {
      if (this.appType != 3) {
        this.priceValue = "";
      }
    },

    // 删除油枪
    changeOilGunValue() {
      if (this.appType != 3) {
        this.oilGunNum = "";
        this.oilGunName = "";
        this.oilName = "";
        this.oilClass = "";
        this.oilId = "";
        this.oilOfficialPrice = "";
      }
    },

    // 点击价格列表
    priceChange(item) {
      this.priceValue = item;
      this.$refs.fieldRef.blur();
      this.showKeyboard = false;
      this.showRemitPage = true;
      this.radioParams = "2";
      this.getPayInfo();
    },

    clickCoupons(status) {
      if (status) {
        return;
      }
      this.showCouponList = true;
    },

    // 点击优惠劵
    changeRadioCoupon(index) {
      this.chosenCoupon = index;
      this.showCouponList = false;
      this.radioCouponsValue = index;
      this.couponPrice = (this.coupons[index].value / 100).toFixed(2);
      this.couponNo = this.coupons[index].couponNo;
      this.couponUserId = this.coupons[index].couponUserId;
      console.log(this.coupons[index]);
      this.updateOrderByCoupon();
    },

    // 调取优惠劵订单
    updateOrderByCoupon() {
      this.verticalPrice = "";
      const {
        oilGunNum,
        phone,
        openId,
        stationId,
        newPrice,
        oilId,
        couponNo,
        couponUserId
      } = this;
      const { ordNo } = this.CouponData;
      let cardFlag = "2";
      if (this.radioParams == "1") {
        cardFlag = "2";
      } else if (this.radioParams == "2") {
        cardFlag = "1";
      }
      this.$axios
        .$post("/updateOrderByCoupon", {
          aliUserId: "1",
          appType: "1",
          cardFlag,
          gunName: oilGunNum,
          mobilePhone: phone,
          oilId,
          openId: openId,
          couponNo,
          orderNo: ordNo,
          payType: "wx",
          receivableAmt: newPrice,
          stationId,
          version: "1.0",
          couponUserId
        })
        .then(res => {
          if (res.retCode == 0) {
            this.CouponData = res.data || {};
            this.ordNo = res.data.ordNo;
            this.verticalPrice = res.data.discountAmt || 0;
          } else {
            this.radioParams = "2";
            throw new Error("储值卡无法交易");
          }
        })
        .catch(function(error) {
          Toast({
            message: "确认订单信息失败，请重试"
          });
          console.log(error);
        });
    },
    // 点击储值卡
    changeStoredVale(val) {
      this.radioParams = val;
      this.updateOrderByCoupon();
    },

    // 回到选择油枪的页面
    goOilGunSelect() {
      if (this.appType != 3) {
        this.oilGunStatus = true;
        this.showKeyboard = false;
        this.showRemitPage = false;
      }
    },

    // 返回上一页
    goFuelPage() {
      if (!this.userId) {
        this.$router.replace({ path: `/${this.enterpriseId}/fuel` });
        this.$router.go(-1);
      }
    },
    isDecimal(num) {
      let data = {};
      data.x = String(num).indexOf(".") + 1;
      data.y = String(num).length - data.x;
      return data;
    },
    // 确认金额
    onCloseKeyboard() {
      let decimal = this.isDecimal(this.priceValue);
      if (Number(this.priceValue) < 0.01) {
        return;
      } else if (decimal.y > 2 && decimal.x != 0) {
        Toast("最多两位小数");
        return;
      }
      this.getPayInfo();
      this.$refs.fieldRef.blur();
      this.showKeyboard = false;
      this.showRemitPage = true;
      this.radioParams = "2";
    },

    // pos
    getPayPosInfo() {
      // let ua = window.navigator.userAgent.toLowerCase();
      // //判断是不是微信
      // if (ua.match(/MicroMessenger/i) == "micromessenger") {
      //   // 微信
      //   console.log('微信');
      // }
      // //判断是不是支付宝
      // if (ua.match(/AlipayClient/i) == "alipayclient") {
      //   //支付宝
      //   console.log('支付宝');
      // }
      this.verticalPrice = "";
      this.couponPrice = "";
      this.chosenCoupon = -1;
      this.couponUserId = "";
      this.couponNo = "";
      const { oilGunNum, phone, openId, stationId, newPrice } = this;
      this.$axios
        .$post("/createOrder", {
          aliUserId: "1",
          appType: this.appType,
          cardFlag: "1",
          gunName: this.oilGunNum,
          mobilePhone: phone,
          newCreatefalg: "1",
          openId: openId,
          orderOriginType: "2",
          payType: "wx",
          receivableAmt: this.priceValue,
          stationId,
          version: "1.0",
          userId: this.userId,
          orderRandomId: this.orderRandomId
        })
        .then(res => {
          if (res.retCode == 0) {
            this.CouponData = res.data || {};
            this.verticalPrice = res.data.discountAmt || 0;
          }
        })
        .catch(function(error) {
          Toast({
            message: "确认订单信息失败，请重试"
          });
          console.log(error);
        });
    },
    // 获取订单信息
    getPayInfo() {
      this.verticalPrice = "";
      this.couponPrice = "";
      this.chosenCoupon = -1;
      this.radioCouponsValue = "-1";
      this.couponUserId = "";
      this.couponNo = "";
      const { oilGunNum, phone, openId, stationId, newPrice } = this;
      this.$axios
        .$post("/createOrder", {
          aliUserId: "1",
          appType: "1",
          cardFlag: "1",
          gunName: oilGunNum,
          mobilePhone: phone,
          newCreatefalg: "1",
          openId: openId,
          orderOriginType: "4",
          payType: "wx",
          receivableAmt: newPrice,
          stationId,
          version: "1.0",
          userId: this.userId,
          utmSource: this.utmSource
        })
        .then(res => {
          if (res.retCode == 0) {
            this.CouponData = res.data || {};
            this.verticalPrice = res.data.discountAmt || 0;
          }
        })
        .catch(error => {
          Toast({
            message: "确认订单信息失败，请重试"
          });
          this.CouponData = {};
          console.log(error);
        });
    },

    // input获取焦点
    onFocusField() {
      if (this.appType == 3) {
        return;
      }
      if (!this.oilGunNum || !this.oilGunName) {
        this.$refs.fieldRef.blur();
        return;
      }
      // 不调动手机键盘
      this.$refs.fieldRef.blur();
      this.oilGunStatus = false;
      this.showKeyboard = true;
      this.showRemitPage = false;
    },

    // 支付
    submitRemit() {
      const _this = this;
      const { openId, stationId } = this;
      let { ordNo } = this.CouponData;
      console.log(this.CouponData);
      if (this.radioParams === "2") {
        //根据接口返回的数据，在微信内拉起公众号支付，进行付款操作
        let data = {
          aliUserId: "1",
          newCouponFalg: "1",
          openId,
          ordNo,
          stationId
        };
        let payUrl = "/toThirdPayV2";
        this.$axios
          .post(payUrl, data)
          .then(function(response) {
            if (response.data.retCode === 0) {
              const data = response.data.data;
              if (data.thirdPayment === "5") {
                window.location.href = data.redirectUrl;
              } else {
                WeixinJSBridge.invoke(
                  "getBrandWCPayRequest",
                  {
                    appId: data.payAppId,
                    timeStamp: data.payTimeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                    nonceStr: data.paynonceStr, // 支付签名随机串，不长于 32
                    package: data.payPackage, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                    signType: data.paySignType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                    paySign: data.paySign // 支付签名
                  },
                  function(res) {
                    if (res.err_msg === "get_brand_wcpay_request:ok") {
                      // 使用以上方式判断前端返回,微信团队郑重提示：
                      //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                      if (_this.couponUserId) {
                        _this.$axios
                          .post("/updateCouponUser", {
                            couponUserId: _this.couponUserId
                          })
                          .then(res => {
                            console.log(res);
                          });
                      }
                      Toast("支付成功");
                      _this.$router.replace({
                        path: `/${_this.enterpriseId}/fuel/success?ordNo=${ordNo}`
                      });
                    } else {
                      _this.goOilGunSelect();
                      Toast("支付失败，请重试");
                    }
                  }
                );
              }
            } else {
              _this.goOilGunSelect();
              Toast({
                message: "获取支付信息失败，请重试"
              });
            }
          })
          .catch(function(error) {
            _this.goOilGunSelect();
            Toast({
              message: "获取下单信息失败，请重试"
            });
            console.log(error);
          });
      } else if (_this.radioParams === "1") {
        _this.$axios
          .$get("/newDzkCouponPaySetV3", {
            params: {
              ordNo,
              couponUserId: _this.couponUserId
            }
          })
          .then(res => {
            if (res.retCode != 0) {
              _this.goOilGunSelect();
              throw new Error("储值卡支付失败");
            } else {
              Toast("支付成功");
              _this.$router.replace({
                path: `/${_this.enterpriseId}/fuel/success?ordNo=${ordNo}`
              });
            }
          })
          .catch(err => {
            _this.goOilGunSelect();
            alert(err);
          });
      } else {
        _this.goOilGunSelect();
        return;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.top_bg {
  width: 100vw;
  height: 4rem;
  // background: url("../static/fuel/pay-bg.png") no-repeat;
  background: url("../../../static/fuel/pay-bg.png") no-repeat;
  background-size: 100% 100%;
}

::v-deep .field_price > div:nth-child(1) {
  width: 1em;
}

.fuel_remit_wraper {
  box-sizing: border-box;
  // min-height: 100vh;

  width: 90vw;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0.3rem;

  // &.active {
  //   // background-color: #fff;
  // }

  .fuel_remit_nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.32rem 0.24rem;
    background-color: #fff;
    border-bottom: 2px dashed #f5f5f5;
    border-radius: 0.3rem 0.3rem 0rem 0rem;

    .icon_fixed {
      width: 0.32rem;
      height: 0.32rem;
      // background: url("../static/fuel/fixed.png") no-repeat 0 0;
      background: url("../../../static/fuel/fixed.png") no-repeat 0 0;
      background-size: 100% 100%;
    }

    .name {
      font-size: 0.32rem;
      max-width: 80vw;
      color: #333;
    }

    .icon_right {
      width: 0.32rem;
      height: 0.32rem;
      background: url("../../../static/fuel/right.png") no-repeat 0 0;
      // background: url("../static/fuel/right.png") no-repeat 0 0;
      background-size: 100% 100%;
    }
  }

  .van-number-keyboard {
    &.disabold .van-key--blue {
      background-color: #eaeaea;
    }
  }

  .remit_container {
    .oilGun_container {
      background-color: rgb(245, 246, 247);
      .fuel_remit_top {
        padding: 0.24rem;
        box-sizing: border-box;
        width: 100%;
        background-color: #fff;
        border-radius: 0rem 0rem 0.3rem 0.3rem;

        &.active {
          padding-bottom: 0.2rem;
          border-radius: 0rem 0rem 0.3rem 0.3rem;
        }

        .oilGun_info {
          min-height: 0.52rem;
          margin-top: 0.3rem;
          border-top: 1px solid #e5e5e5;
          padding-top: 0.3rem;

          .oilGun_info_top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;

            .oilGun_title {
              font-size: 0.32rem;
              font-weight: 500;
              margin-right: 0.32rem;
              color: #333;
            }

            .oilGun_placeholder {
              color: #aeaeae;
              font-size: 0.28rem;
              font-weight: 500;
            }
          }

          .oli_icon_close {
            width: 0.28rem;
            height: 0.28rem;
            background: url("../../../static/fuel/close.png") no-repeat 0 0;
            // background: url("../static/fuel/close.png") no-repeat 0 0;
            background-size: 100% 100%;
            position: absolute;
            right: 0.24rem;
          }

          .oilGun_value {
            padding-right: 0.4rem;
            color: #333;

            .num {
              font-size: 0.4rem;
              font-weight: 600;
            }

            .name {
              font-size: 0.28rem;
            }
          }

          .price {
            color: #999;
            font-size: 0.27rem;
            margin-top: 0.3rem;
          }
        }

        .divider_line {
          position: relative;
          width: 100%;
          margin: 0.16rem 0;
          background: #fff;

          // &.active {
          //   // background-color: #98cda7;
          // }

          &.input {
            margin: 0;
            background: #fff;

            .price_list {
              display: flex;
              margin-top: 0.2rem;
              margin-bottom: 0.3rem;
              background: #fff !important;

              .price_value {
                width: 1.64rem;
                text-align: center;
                height: 0.7rem;
                line-height: 0.7rem;
                font-size: 0.26rem;
                background-color: #fff;
                border: 1px solid #f6f6f6;
                margin-right: 0.1rem;
                border-radius: 0.16rem;
                display: flex;
                justify-content: center;
                align-items: center;

                &:nth-child(4n) {
                  margin-right: 0;
                }
              }
            }

            // &.active {
            //   // background-color: #98cda7;
            // }
          }
        }

        .amount_of_money {
          .amount_of_money_title {
            font-size: 0.32rem;
            font-weight: 500;
            margin-bottom: 0.2rem;
            color: #333;
          }

          .field_price {
            height: 1rem;
            background: #f7f9fc;
            border: 1px solid #e5e5e5;
            border-radius: 0.2rem;
            display: flex !important;
            flex-direction: row;
            align-items: center !important;

            &.placeStyle .van-field__body input {
              font-size: 0.32rem;
              font-weight: 400;
            }

            .icon_close {
              width: 0.28rem;
              height: 0.28rem;
              background: url("../../../static/fuel/close.png") no-repeat 0 0;
              // background: url("/../static/fuel/close.png") no-repeat 0 0;
              background-size: 100% 100%;
            }

            .van-field__body {
              input {
                font-size: 0.4rem;
                font-weight: 600;
              }
            }

            .discountAmt {
              font-size: 0.28rem;
              color: #32af51;
            }

            .van-field__label {
              color: #333;
              font-size: 0.32rem;
              font-weight: 500;
              width: auto;
              margin-right: 0.32rem;
            }
          }

          // .van-cell {
          //   padding: 6px 16px;
          // }
        }
      }

      .oilGun_main_wraper {
        display: flex;
        flex-direction: column;
        align-items: center;
        // padding: 0 0.24rem;
        margin-top: 0.52rem;

        .oilGun_main_title {
          height: 1.1rem;
          line-height: 1.1rem;
          font-size: 0.28rem;
          font-weight: 600;
        }

        .oilGun_main_content {
          width: 100%;
          display: flex;
          flex-wrap: wrap;

          .main_card {
            position: relative;
            width: 1.9rem;
            height: 0.8rem;
            margin: 0rem 0.2rem 0.2rem 0rem;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            background: #f7f9fc;
            border: 1px solid #e5e5e5;
            border-radius: 0.16rem;
            overflow: hidden;

            &.active {
              // background-color: #34b053;
              border: 1px solid #fd6b00;
              opacity: 0.8;
              color: #fd6b00;

              .gunName {
                color: #fd6b00;
              }

              .oilName {
                color: #fd6b00;
              }

              .active_icon {
                display: inline-block !important;
              }
            }

            &:nth-child(3n) {
              margin: 0 0 0.08rem 0;
            }

            .line {
              margin-right: 0.04rem;
              margin-left: 0.06rem;
            }

            .gunName {
              font-size: 0.36rem;
              font-weight: 600;
              color: #333;
              margin-bottom: 0.1rem;
            }

            .oilName {
              font-size: 0.24rem;
              // color: #fd6b00;
            }

            .active_icon {
              width: 14px;
              height: 10px;
              position: absolute;
              right: 0;
              bottom: 0;

              img {
                width: 100%;
              }
            }
          }
        }
      }

      .remit_page_container {
        background-color: #fff;
        padding: 0.3rem;
        margin-top: 0.4rem;
        border-radius: 0.3rem;

        .remit_page_wraper {
          // padding: 0.32rem 0.28rem 0.4rem;
          // background-color: #f6f6f6;
          // border-radius: 0.2rem;

          .stored_radio {
            height: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .stored_card {
              display: flex;
              align-items: center;
              font-size: 0.32rem;
              font-weight: 600;
              color: #333;
              margin-left: 0.16rem;

              .icon {
                width: 0.6rem;
                height: 0.6rem;
                margin-right: 0.16rem;
                border: 1px dashed #ddd;

                &.stored {
                  // background: url("../../../static/vip/a1.svg") no-repeat 0 0;
                  background: url("../../../static/fuel/pay-cxk.png") no-repeat
                    0 0;
                  // background: url("../static/fuel/pay-cxk.png") no-repeat 0 0;
                  background-size: 100% 100%;
                }

                &.vx {
                  // background: url("../../../static/fuel/vx_remit.png") no-repeat
                  background: url("../../../static/fuel/pay-wx.png") no-repeat 0
                    0;
                  // background: url("../static/fuel/pay-wx.png") no-repeat 0
                  // 0;
                  background-size: 100% 100%;
                }
              }
            }
          }

          .stored_amt {
            font-size: 0.24rem;
            color: #9095ad;
            padding: 0.1rem 0rem;
          }

          .divider_line {
            width: 100%;
            height: 1px;
            margin: 0.16rem 0;
            background-color: #eee;
          }
        }
      }

      .coupon_info {
        height: 1.3rem;
        margin-top: 0.3rem;
        background: #fff;
        display: flex;
        align-items: center;
        padding: 0rem 0.3rem 0rem 0.46rem;
        border-radius: 0.3rem;

        .van-cell {
          display: flex;
          flex-direction: row;
          align-items: center;
          background-color: transparent;
          flex: 1;
          padding: 10px 0px;
          font-size: 0.32rem;
          font-weight: 600;
        }

        img {
          width: 0.6rem;
          height: 0.6rem;
          margin-right: 0.16rem;
          border: 1px dashed #ddd;
        }
      }
    }
  }

  .popup_container {
    .title {
      width: 100%;
      text-align: center;
      height: 1.5rem;
      line-height: 1.5rem;
      font-size: 0.36rem;
      font-weight: 600;
    }

    .popup_main {
      .popup_name {
        box-sizing: border-box;
        padding: 0 0.2rem;
        width: 100%;
        background-color: #f5f6f7;
        height: 0.8rem;
        line-height: 0.8rem;
      }

      .popup_price {
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 0.8rem;
        padding: 0 0.2rem;

        .tag {
          color: #666;
        }

        .price {
          color: #666;
        }
      }

      // .popup_preferential {
      // }
    }
  }

  .coupons_popup_container {
    .title {
      width: 100%;
      text-align: center;
      height: 1.1rem;
      line-height: 1.1rem;
      font-size: 0.36rem;
      font-weight: 600;
    }

    .van_popup_main {
      .popup_list {
        box-sizing: border-box;
        padding: 0.3rem;
        margin: 0.3rem;
        background-color: #f5f6f7;
        border-radius: 0.16rem;
        display: flex;

        .left_popup {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 2.2rem;
          height: 1.7rem;
          background: url("../../../static/coupon/quan1.2x.png") no-repeat 0 0;
          // background: url("../static/coupon/quan1.2x.png") no-repeat 0 0;
          background-size: 100% 100%;
          color: #fff;
          margin-right: 8px;

          .valueDesc {
            font-size: 0.4rem;
            margin-bottom: 0.32rem;
          }

          .condition {
            font-size: 0.28rem;
          }

          &.red {
            background: url("../../../static/coupon/quan2.2x.png") no-repeat 0 0;
            // background: url("../static/coupon/quan2.2x.png") no-repeat 0 0;
            background-size: 100% 100%;
          }
        }

        .right_popup {
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .name {
            width: 1.5rem;
            text-align: center;
            height: 0.6rem;
            line-height: 0.6rem;
            background-color: #fad25e;
            border-radius: 0.6rem;

            &.red {
              background-color: #ed9381;
            }
          }

          // .title {
          // }
        }

        .radio {
          position: absolute;
          right: 0.32rem;

          input {
            zoom: 1.5;
          }
        }
      }
    }
  }
}

.bottom_fix_bar {
  z-index: 9999;
  width: 100%;
  position: fixed;
  background-color: #fff;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  padding: 0.2rem 0rem;

  .fix_bar_main {
    width: 90vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;

    .car_container {
      display: flex;
      align-items: center;
      flex: 1;
      // border-top: 1px solid #eee;

      .icon_car {
        width: 0.6rem;
        height: 0.4rem;
        margin-right: 0.3rem;
        margin-left: 0.36rem;

        .van-info {
          background-color: #32af51;
        }
      }

      .price_bar {
        font-size: 0.28rem;
        color: #fc474b;

        .price_value {
          font-size: 0.32rem;
          font-weight: 600;
        }
      }

      .price_coupon {
        font-size: 0.2rem;
        color: #999;
        // font-weight: 500;

        .coupon_value {
          color: #32af51;
        }
      }
    }

    .van-button--warning {
      background-color: #fd6b00;
      height: 0.9rem;
    }

    .van-button--normal {
      padding: 0 23px;
    }
  }
}

.oil-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 80%;
  width: 300px;
  justify-content: space-between;
  align-content: baseline;
  overflow-y: scroll;
  margin-top: 10px;

  .oil-items {
    width: 2.2rem;
    height: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2f2f2;
    margin-top: 0.2rem;
    border-radius: 5px;

    span {
      font-size: 16px;
    }

    .line {
      margin-right: 0.04rem;
      margin-left: 0.06rem;
    }

    .gunName {
      font-size: 0.36rem;
      font-weight: 600;
      color: #333;
      margin-bottom: 0.1rem;
    }

    .oilName {
      font-size: 0.24rem;
      // color: #fd6b00;
    }
  }

  .oil-items:last-child {
    margin-bottom: 50px;
  }
}

.oil-box::-webkit-scrollbar {
  display: none;
}

.oil-title {
  width: 300px;
  text-align: center;
  border-bottom: 1px solid #333;
  padding: 20px 0 10px 0;

  span {
    font-size: 19px;
    font-weight: 400;
    display: inline-block;
  }
}
</style>
